<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JS自动切换焦点</title>
    <script type="text/javascript">
        window.onload = function() {
            var EventUtil = {

                addhandler: function(element, type, handler) {
                    if (element.addEventListenter) {
                        element.addEventListenter(type, handler, false);
                    } else if (element.attachEvent) {
                        element.attachEvent("on" + type, handler);
                    } else {
                        element["on" + type] = handler;
                    }
                },
                /*
                该方法返回Event对象的引用，考虑到IE中对事件的位置的不同，可以使用这个方法取得Event对象。
                */
                getEvent: function(event) {
                    return event ? event : window.event;
                },
                //返回事件的目标
                getTarget: function() {
                    return event.target || event.srcElement;
                },
                /*通过比较用户输入的值与文本框的maxlength特性，确定是否达到最大长度
                当两个值相等时，则需要查找表单字段的集合，查找到下一个文本框后将焦点切换
                */
                preventDefault: function() {
                    if (event.preventDefault) {
                        event.preventDefault();
                    } else {
                        event.returnValue = false;
                    }
                },
                stopPropagation: function() {
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBuddle = true;
                    }
                },
                removehandler: function(element, type, handler) {
                    if (element.removeEventListenter) {
                        element.addEventListenter(type, handler, false);
                    } else if (element.detachEvent) {
                        element.detachEvent("on" + type, handler);
                    } else {
                        element["on" + type] = null;
                    }
                },
                getCharCode: function(event) {
                    if (typeof event.charCode == "number") {
                        return event.charCode;
                    } else {
                        return event.keyCode;
                    }
                },
                //处理字符编码
            }

            var textarea = document.forms[0].elements["text"];
            var button = document.getElementById("button");

            (function() {
                function tabForward(event) { //event事件对象传到事件处理程序中去
                    event = EventUtil.getEvent(event); //把event传给getEvent()方法
                    var target = EventUtil.getTarget(event);

                    if (target.value.length == target.maxLength) { //达到最大长度
                        var form = target.parentElement;

                        for (var i = 0, len = form.elements.length; i < len - 1; i++) {
                            if (form.elements[i] == target) {
                                form.elements[i + 1].focus(); //切换焦点
                                return;
                            }
                        }
                    }
                }
                var textName = document.getElementById("textName");
                var textTel = document.getElementById("textTel");
                var textID = document.getElementById("textID");

                EventUtil.addhandler(textName, "keyup", tabForward); //在用户输入新字符后触发keyup事件
                EventUtil.addhandler(textTel, "keyup", tabForward);
                EventUtil.addhandler(textID, "keyup", tabForward);
            })();
        }
    </script>
</head>

<body>
    <form>
        <input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名" />
        <input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码" />
        <input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID" />

    </form>
</body>

</html>